<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';

// 筛选条件数据
const value = ref('')
const options = ref([
  { value: 'all', label: '全部' }
])

const deptValue = ref('')
const deptOptions = ref([
  { value: 'all', label: '所有部门' }
])

// 日期选择 - 默认为2025年
const dataValue = ref('2025')

// 客户统计数据 - 根据图片显示都为0
const customerStats = ref({
  current: 0,      // 截止当前代账客户
  newOctober: 0,   // 10月新增代账客户
  lossOctober: 0   // 10月流失客户
})

// 流失分析数据 - 根据图片显示都为0
const lossAnalysis = ref({
  unassigned: 0,          // 未派工客户数
  contractExpired: 0,      // 合同已到期客户数
  noWechat: 0,            // 未开通微信服务客户数
  suspended: 0            // 暂停服务客户数
})

// 图表相关
const mainChartRef = ref(null)
const chartLabel = ref('切换表格视图')
const showTable = ref(false) // 默认显示图表

// 图表配置 - 折线图样式
const chartOption = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['总代账客户数', '新增代账客户数', '流失客户数'],
    top: 10,
    right: 10
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLine: {
      lineStyle: {
        color: '#999'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#999'
      }
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#eee'
      }
    }
  },
  series: [
    {
      name: '总代账客户数',
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#ff9c00',
        width: 2
      },
      itemStyle: {
        color: '#ff9c00'
      },
      data: [320, 332, 301, 334, 390, 330, 320, 200, 320, 500, 220, 200]
    },
    {
      name: '新增代账客户数',
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#67c23a',
        width: 2
      },
      itemStyle: {
        color: '#67c23a'
      },
      data: [120, 132, 101, 134, 90, 230, 210, 200, 320, 500, 220, 200]
    },
    {
      name: '流失客户数',
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#f56c6c',
        width: 2
      },
      itemStyle: {
        color: '#f56c6c'
      },
      data: [220, 182, 191, 234, 290, 330, 310, 200, 320, 500, 220, 200]
    }
  ]
}

// 切换视图
const toggleView = () => {
  showTable.value = !showTable.value
  chartLabel.value = showTable.value ? '切换图形视图' : '切换表格视图'
}

// 初始化图表
onMounted(() => {
  nextTick(() => {
    if (mainChartRef.value) {
      const chart = echarts.init(mainChartRef.value)
      chart.setOption(chartOption)
      
      window.addEventListener('resize', () => {
        chart.resize()
      })
    }
  })
})
</script>

<template>
  <div class="agent-customer">
    <!-- 顶部筛选区域 -->
    <div class="filter-section">
      <span class="filter-label">统计范围：</span>
      <el-select v-model="deptValue" placeholder="所有部门" class="dept-select">
        <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="value" placeholder="全部" class="type-select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <a href="#" class="report-link">报表逻辑说明</a>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-section">
      <!-- 顶部三个数据卡片 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-content">
            <span class="stat-number">{{ customerStats.current }}</span>
            <span class="stat-unit">户</span>
          </div>
          <div class="stat-label">截止当前代账客户</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-content">
            <span class="stat-number">{{ customerStats.newOctober }}</span>
            <span class="stat-unit">户</span>
          </div>
          <div class="stat-label">10月新增代账客户</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-content">
            <span class="stat-number">{{ customerStats.lossOctober }}</span>
            <span class="stat-unit">户</span>
          </div>
          <div class="stat-label">10月流失客户</div>
        </div>
      </div>

      <!-- 中间分析区域 -->
      <div class="analysis-section">
        <!-- 左侧图表区域 -->
        <div class="chart-area">
          <div class="chart-header">
            <el-date-picker 
              v-model="dataValue" 
              type="year" 
              placeholder="选择年份"
              class="year-picker"
            />
            <h3 class="chart-title">2025年代账客户增长流失情况</h3>
            <button class="toggle-btn" @click="toggleView">
              {{ chartLabel }}
            </button>
          </div>
          
          <div class="chart-container">
            <div v-show="!showTable" ref="mainChartRef" class="chart"></div>
            <div v-show="showTable" class="table-placeholder">
              <p>表格视图区域</p>
            </div>
          </div>
        </div>

        <!-- 右侧流失分析 -->
        <div class="loss-analysis">
          <div class="loss-header">
            <h3 class="loss-title">2025年累计流失原因分析</h3>
          </div>
          <div class="loss-content">
            <div class="loss-total">
              <span>合计：0户</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部客户等级分类和流失原因分析合并区域 -->
      <div class="classification-section">
        <div class="classification-main">
          <!-- 左侧：客户等级分类（第二张图片的内容） -->
          <div class="classification-left">
            <div class="classification-header">
              <h3 class="classification-title">按客户等级分类统计</h3>
            </div>
           
          </div>

          <!-- 右侧：流失原因分析（第一张图片的内容） -->
          <div class="classification-right">
           
            <div class="classification-grid">
              <div class="grid-item">
                <div class="grid-label">未派工客户数</div>
                <div class="grid-value">0户</div>
              </div>
              <div class="grid-item">
                <div class="grid-label">合同已到期客户数</div>
                <div class="grid-value">0户</div>
              </div>
              <div class="grid-item">
                <div class="grid-label">未开通微信服务客户数</div>
                <div class="grid-value">0户</div>
              </div>
              <div class="grid-item">
                <div class="grid-label">暂停服务客户数</div>
                <div class="grid-value">0户</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.agent-customer {
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 16px;
}

.filter-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  
  .filter-label {
    font-size: 14px;
    color: #333;
    font-weight: normal;
  }
  
  .dept-select, .type-select {
    width: 120px;
  }
  
  .report-link {
    margin-left: auto;
    color: #1890ff;
    text-decoration: none;
    font-size: 14px;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.content-section {
  background: white;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  
  .stat-card {
    background: #fafafa;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e8e8e8;
    
    .stat-content {
      margin-bottom: 8px;
      
      .stat-number {
        font-size: 28px;
        font-weight: 600;
        color: #ff9c00;
      }
      
      .stat-unit {
        font-size: 14px;
        color: #666;
        margin-left: 4px;
      }
    }
    
    .stat-label {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }
}

.analysis-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.chart-area {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  
  .chart-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #e8e8e8;
    background: #fafafa;
    
    .year-picker {
      width: 100px;
    }
    
    .chart-title {
      margin: 0;
      font-size: 14px;
      color: #333;
      font-weight: 600;
    }
    
    .toggle-btn {
      margin-left: auto;
      padding: 6px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      background: white;
      color: #333;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.3s;
      
      &:hover {
        border-color: #1890ff;
        color: #1890ff;
      }
    }
  }
  
  .chart-container {
    padding: 16px;
    height: 300px;
    
    .chart {
      width: 100%;
      height: 100%;
    }
    
    .table-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #999;
      font-size: 14px;
    }
  }
}

.loss-analysis {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  
  .loss-header {
    padding: 16px;
    border-bottom: 1px solid #e8e8e8;
    background: #fafafa;
    
    .loss-title {
      margin: 0;
      font-size: 14px;
      color: #333;
      font-weight: 600;
    }
  }
  
  .loss-content {
    padding: 16px;
    
    .loss-total {
        
      padding-top: 12px;
      margin-top: 240px;
      border-top: 1px solid #e8e8e8;
      font-weight: 600;
      color: #333;
    }
  }
}

.classification-section {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  
  .classification-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    .classification-left,
    .classification-right {
      border-right: 1px solid #e8e8e8;
      
      &:last-child {
        border-right: none;
      }
    }
  }
}

.classification-left {
  .classification-header {
    padding: 16px;
    border-bottom: 1px solid #e8e8e8;
    background: #fafafa;
    
    .classification-title {
      margin: 0;
      font-size: 14px;
      color: #333;
      font-weight: 600;
      text-align: center;
    }
  }
  
  
}

.classification-right {
 .classification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 200px;
    
    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #e8e8e8;
      margin: -1px 0 0 -1px;
      
      .grid-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
        text-align: center;
        padding: 0 8px;
      }
      
      .grid-value {
        font-size: 18px;
        font-weight: 600;
        color: #ff9c00;
      }
    }
  }
}

/* Element UI 组件样式调整 */
:deep(.el-select) {
  .el-input__inner {
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
  }
}

:deep(.el-date-editor) {
  .el-input__inner {
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .analysis-section {
    grid-template-columns: 1fr;
  }
  
  .classification-main {
    grid-template-columns: 1fr !important;
  }
}
</style>